<template>
	<view class="container">
		<view class="logo-container">
			<image class="logo" src="/static/logo.png"></image>
			<view class="app-name">农检通</view>
		</view>

		<view class="form-container">
			<u-form :model="form" ref="uForm" :rules="rules">
				<u-form-item label="手机号码" prop="phoneNumber" label-width="160rpx" borderBottom>
					<u-input v-model="form.phoneNumber" placeholder="请输入手机号码" border="none" />
				</u-form-item>
				<u-form-item label="输入密码" prop="password" label-width="160rpx" borderBottom>
					<u-input type="password" v-model="form.password" placeholder="请输入密码" border="none" />
				</u-form-item>
			</u-form>
		</view>

		<u-button @click="submit" type="primary" :custom-style="loginBtnStyle">登录</u-button>

		<view class="link-group">
			<text class="link-text" @click="toastInformation('新用户注册')">新用户注册</text>
			<text class="link-text" @click="toastInformation('修改密码')">忘记/修改密码</text>
		</view>

		<view class="footer">
			<u-checkbox shape="square" active-color="#F56C6C" @change="isAgree"></u-checkbox>

			<view class="agreement-text">
				我已阅读并同意
				<text class="agreement-link" @click="showAgreement">《用户协议及隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agree: false,
				form: {
					phoneNumber: '15181989082',
					password: '',
				},
				rules: {
					'phoneNumber': [{
							required: true,
							message: '请填入手机号',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^[0-9]*$/g,
							transform(value) {
								return String(value);
							},
							message: '只能包含数字',
							trigger: ['blur', 'change']
						},
						{
							len: 11,
							message: '长度只能为11位',
							trigger: ['blur', 'change']
						}
					],
					'password': {
						required: true,
						message: '请填入密码',
						trigger: ['blur', 'change'],
					}
				},

				loginBtnStyle: {
					color: '#fff',
					backgroundColor: '#00B54E',
					width: 'calc(100% - 80rpx)',
					height: '90rpx',
					margin: '60rpx 40rpx 0',
					borderRadius: '20rpx',
					fontSize: '32rpx'
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
				}).catch(errors => {
					uni.$u.toast('效验失败,请根据提示修正');
					return;
				})
				if (!this.agree) {
					uni.showToast({
						title: '请先同意用户协议',
						icon: 'none'
					});
					return;
				}
				
				console.log('登录信息:', this.form);
				
				uni.request({
					url: 'http://localhost:8080/app/login',
					method: 'POST',
					data: {
						mobilePhone: this.form.phoneNumber,
						password: this.form.password
					},
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if(res.data.code == 200){
							uni.showToast({
								title: '登录成功',
								icon: 'success'
							});
							const token = res.data.data.token;
							const username = res.data.data.userInfo.nickname;
							uni.setStorageSync('token',token);
							uni.setStorageSync('username', username);
							const app = getApp();
							uni.switchTab({
								url: '/pages/regulator/index'
							});
						}
						else{
							uni.showToast({
								title: '登录失败,错误原因\n' + res.data.message,
								icon: 'error'
							})
						}
					}
				})
				
			},
			toastInformation(failedResponse) {
				uni.showToast({
					title: '无需' + failedResponse + ",请联系管理员",
					icon: 'none'
				});
			},
			showAgreement() {
				uni.showToast({
					title: '正在打开协议...',
					icon: 'none'
				});
			},
			isAgree(value) {
				this.agree = value
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #ffffff;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.logo-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 120rpx;
		margin-bottom: 100rpx;
	}

	.logo {
		width: 180rpx;
		height: 180rpx;
		border-radius: 45rpx;
	}

	.app-name {
		font-size: 44rpx;
		color: #333;
		margin-top: 30rpx;
	}

	.link-group {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.link-text {
		color: #00B54E;
		font-size: 28rpx;
	}

	.footer {
		display: flex;
		align-self: center;
		margin-top: auto;
		margin-bottom: 60rpx;
		font-size: 30rpx;
		color: #666;
	}

	.agreement-text {
		margin-left: 10rpx;
	}

	.agreement-link {
		color: #00B54E;
		text-decoration: underline;
	}
</style>